<template>
  <div class="login-container">
    <!-- 头部导航 -->
    <van-nav-bar
      title="登录"
      left-arrow
      @click-left="$router.back()"
      class="app-navbar-header"
    />
    <!-- 表单 -->
    <van-form
      :show-error="false"
      validate-firstF
      :show-error-message="false"
      ref="formRef"
      @failed="onFailed"
      @submit="handleLogin"
    >
      <van-cell-group>
        <van-field
          v-model="user.mobile"
          clearable
          icon-prefix="toutiao"
          left-icon="shouji"
          name="mobile"
          placeholder="请输入手机号"
          :rules="formRules.mobile"
        />
        <van-field
          v-model="user.code"
          clearable
          name="code"
          icon-prefix="toutiao"
          left-icon="yanzhengma"
          placeholder="请输入验证码"
          :rules="formRules.code"
        >
          <template #button>
            <!-- 倒计时 -->
            <van-count-down
             :time="1000 * 60"
             format="ss s"
             v-if="isShowDownTime"
             @finish='isShowDownTime = false'
              />
            <!-- 获取验证码button -->
            <van-button
             :loading='downTimeLoading'
              size="small"
              round
              v-else
              class="sent-btn"
              @click.prevent="onSendSms"
              >获取验证码</van-button
            >
          </template>
        </van-field>
      </van-cell-group>
      <!-- 登录 -->
      <div class="login-btn-wrap">
        <van-button type="primary" block class="login-btn">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login, sendSmsCode } from '@/api/user.js'
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data () {
    return {
      user: {
        mobile: '', // 手机号
        code: '' // 验证码
      },
      formRules: {
        mobile: [
          { required: true, message: '请填写手机号' },
          {
            pattern: /^\d{11}$/,
            message: '手机号格式错误'
          }
        ],
        code: [
          { required: true, message: '请填写验证码' },
          { pattern: /^\d{6}$/, message: '验证码错误' }
        ]
      },
      // 是否显示倒计时
      isShowDownTime: false,
      // 倒计时loading
      downTimeLoading: false
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    // 登录
    async handleLogin () {
      // 开始转圈圈
      this.$toast.loading({
        duration: 0, // 持续时间，0表示持续展示不停止(直到成功或失败才停)
        forbidClick: true, // 是否禁止背景点击
        message: '登录中...' // 提示消息
      })
      try {
        const res = await login(this.user)
        this.$toast.success('登录成功')
        // 将token放到vuex中
        this.$store.commit('setUser', res.data.data)
        // 清除页面缓存
        this.$store.commit('deleteKeepAlive', 'LayoutIndex')
        // 跳转到my页面
        // this.$router.back()
        this.$router.push(this.$route.query.redirect || '/')
      } catch (error) {
        console.log('登录失败', error)
        this.$toast.fail('登录失败，手机号或验证码错误')
      }
    },
    // 提交表单且验证不通过后触发
    onFailed (value) {
      if (value.errors[0]) {
        this.$toast({
          message: value.errors[0].message,
          position: 'top' // 防止手机键盘太高看不见提示消息
        })
      }
    },
    // 发送短信验证码
    async onSendSms () {
      try {
        // 校验手机号（通过了我们不需要它的返回值，不通过就给提示）
        await this.$refs.formRef.validate('mobile')
        // 显示loading
        this.downTimeLoading = true
        // 发送请求获取验证码
        await sendSmsCode(this.user.mobile)
        // 验证码请求成功后，显示倒计时
        this.isShowDownTime = true
        // 倒计时结束要隐藏（通过监视finish)
      } catch (err) {
        // try 里面任何代码的错误都会进入catch
        // 不同的错误需要有不同的提示，那就需要判断了
        let message = ''
        if (err && err.response && err.response.status === 429) {
          // 发送短信失败提示
          message = '发送短信太频繁，请稍后重试'
        } else if (err.name === 'mobile') {
          // 表单验证失败的提示错误
          message = err.message
        } else {
          // 未知的错误
          message = '发送失败，请重试'
        }
        // 验证失败提示语
        this.$toast({
          message: message,
          position: 'top'
        })
      }
      // 不管成功或失败都要取消loading
      this.downTimeLoading = false
    }

  }
}
</script>

<style scoped lang="less">
.login-btn-wrap {
  padding: 26px 16px;
  .login-btn {
    background-color: #6bd4fb;
    border: none;
    .van-button__text {
      font-size: 15px;
    }
  }
}
.sent-btn {
  height: 23px;
  background-color: #ededed;
  font-size: 12px;
  color: #666666;
}
/deep/.toutiao-yanzhengma {
  line-height: 31px;
}
</style>
